<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" />
		<mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="{auto: false, bgColor: '#FFFFFF'}" :up="upOption">
			<view style="margin-top:30rpx;padding:0 30rpx;">
				<image src="../../static/install/213.png" mode="aspectFit" style="width:690rpx;height: 144rpx;"></image>
				<view class="sisters">
					<view class="flexs" style="margin-top: 45rpx;">
						<view style="color: #333333; font-size: 32rpx;font-weight: 500;width:130rpx;">
							材质</view>
						<view style="display: flex;flex-flow: wrap;">
							<view class="cityTable" v-for="(item,index) in plateType" :key="index"
								:class="plateTindex==index ? 'cityStyle' :''" @click="plateChild(index,item.id)">
								{{item.texture}}
							</view>
						</view>
					</view>
					<view class="flexs" style="margin-top: 45rpx;">
						<view style="color: #333333; font-size: 32rpx;font-weight: 500;width:80rpx;">
							风格</view>
						<view style="display: flex;flex-flow: wrap;">
							<view class="cityTable" v-for="(item,index) in StyleType" :key="index"
								:class="StyleTindex==index ? 'cityStyle' :''" @click="StyleChild(index,item.id)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="xian"></view>
			<!-- <view style="font-weight: 400;font-size: 32rpx;color: #333333;line-height: 40rpx;	text-align: center;">
			更多选项
		</view> -->
			<view class="options">
				<view v-for="(item,index) in plateData" :key="index">
					<view @click="plateClick(item.goodsId)" class="fle"
						style="margin:0 30rpx;padding: 30rpx 0;border-bottom: 1px solid rgba(30,30,30,0.1);"
						v-for="(items,index) in item.goodsList" :key="index">
						<view style="position: relative;">
							<image style="width:250rpx;height:250rpx;border-radius:20rpx;" :src="items.image" mode="">
							</image>
							<image v-if="items.environmentalProtection == 0" class="imageIco"
								src="../../static/plate/7816.png" mode=""></image>
							<image class="imageIco" v-if="items.environmentalProtection == 1"
								src="../../static/plate/8374.png" mode=""></image>
							<image class="imageIco" v-if="items.environmentalProtection == 2"
								src="../../static/plate/8375.png" mode=""></image>
						</view>
						<view style="width:100%;margin-left: 20rpx;">
							<view class="fle" style="margin:10rpx 0;font-weight: 500;">
								<view style="font-size: 32rpx;color: #333333;">{{items.name}}</view>
								<view
									style="font-size: 40rpx;color: #1E1E1E;font-family: Noto Sans SC-Medium, Noto Sans SC;">
									￥{{items.guidePrice}}</view>
							</view>
							<view class="flex align-center justify-between">
								<image style="width:138rpx;height:40rpx;" src="../../static/plate/attestation.png"
									mode="">
								</image>
								<view style="font-size: 24rpx;font-weight: 400;color: #1E1E1E;">
									元/平方米
								</view>
							</view>
							<view class="fle" style="margin:10rpx 0 ;">
								<view style="display:flex;font-size: 20rpx;">
									<view v-for="(item,index) in lable" :key="index"
										style="margin-right:10rpx;border-radius: 10rpx;border: 1rpx solid #F84949;line-height: 32rpx;padding:2rpx 5rpx;">
										{{item}}
									</view>
								</view>
							</view>
							<view style="margin:10rpx 0;color: rgba(30,30,30,0.3);font-size: 24rpx;font-weight: 400;">
								{{items.number}}+人购买过
							</view>
							<view v-for="(item,index) in item.shopsName" :key="index"
								style="width:100%;border-radius: 8rpx;margin:10rpx 0;display:flex;padding:5rpx 10rpx;background: rgba(30,30,30,0.05);">
								<image style="width:40rpx;height:40rpx;" src="../../static/plate/bag.png" mode="">
								</image>
								<text
									style="line-height: 40rpx;margin-left:30rpx;font-weight: 500;font-size: 24rpx;color: #333333;">{{item.shopsName}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; //引入滚动
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					auto: false,
					empty: {
						tip: '~ 无更多数据 ~'
					},
					textNoMore: '--没有更多了--',
					noMoreSize: 3,
				},
				config: {
					title: '找板材',
					color: '#111111',
					backgroundColor: [1, '#FFFFFF'],
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				id: '',
				lable: [],
				plateType: [],
				plateTindex: 0,
				StyleType: [],
				StyleTindex: 0,
				plateData: []
			}
		},
		created() {
			this.material()
			this.getPlte(undefined, 1, 10);
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(e) {
				this.material()
				this.getPlte(undefined, e.num, 10)
			},
			//材质、风格
			material() {
				this.$api.plteList().then((res) => {
					this.plateType = res.data.result.textureList;
					this.StyleType = res.data.result.categoryList;
					console.log('风格', this.StyleType)
				})
			},
			//板材列表
			getPlte(id, num, size) {
				if (id != null) {
					this.id = id
				} else {
					this.id = ''
				}
				let data = {
					pageNo: num,
					pageSize: size,
					type: 1,
					style: this.id
				}
				this.$api.gcGoods(data).then((res) => {
					if (num == 1) {
						this.plateData = res.data.result.list
					} else {
						this.plateData = this.plateData.concat(res.data.result.list)
					}
					console.log('生椰拿铁', this.plateData)
					res.data.result.list.forEach((element) => {
						element.goodsList.forEach((elements) => {
							this.lable = elements.label.split(",")
						})
					})
					this.mescroll.endBySize(res.data.result.list.length, res.data.total);
				})
			},
			// 材质
			plateChild(e, id) {
				this.plateTindex = e
				if (id == 1) id = ''
				this.getPlte(id, 1, 10)
			},
			// 风格
			StyleChild(e, id) {
				this.StyleTindex = e
				if (id == 1) id = ''
				this.getPlte(id, 1, 10)
			},
			plateClick(id) {
				this.$tools.goPageNoAuth('./plateDetail?id=' + id)
			}
		}
	}
</script>

<style scoped>
	.imageIco {
		width: 78rpx;
		height: 32rpx;
		margin-right: 30rpx;
		position: absolute;
		right: 0rpx;
		bottom: 30rpx;
	}

	.fle {
		display: flex;
		justify-content: space-between;
	}

	.options {
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.sisters {
		width: 690rpx;
		margin-top: 38rpx;
		overflow: hidden;
	}

	.cityStyle {
		font-size: 28rpx;
		background: #492D22;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		color: #fFFFFF !important;

	}

	.cityTable {
		margin-left: 15rpx;
		color: #333333;
		padding: 10rpx 16rpx;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.flexs {
		display: flex;
	}

	.xian {
		height: 1px;
		background: rgba(30, 30, 30, 0.2);
		margin: 30rpx;
	}
</style>
